<!--
 * @Description: 天窗情况
 * @Author: Huang Junjie
 * @Date: 2021-06-01 17:09:50
 * @LastEditTime: 2021-07-28 17:40:48
 * @LastEditors: Liu Zhiwang
-->
<template>
  <div class="sky-light-situation-style">
    <div class="component-inner-div">
      <!-- 四角样式 -->
      <div class="the-four-border the-four-border-01" />
      <div class="the-four-border the-four-border-02" />
      <div class="the-four-border the-four-border-03" />
      <div class="the-four-border the-four-border-04" />
      <!-- 四角样式 -->

      <!-- 标题栏 -->
      <div class="title">
        <div class="tab-style">
          <div :class="activeTabIndex === 0 ? 'active-tab' : 'tab-item'" @click="changeTab(0)">维修天窗情况</div>
          <div :class="activeTabIndex === 1 ? 'active-tab' : 'tab-item'" @click="changeTab(1)">施工天窗情况</div>
        </div>
        <div
          class="more-btn"
        >
          共 {{ dataList.length }} 条
          <!-- <i class="el-icon-arrow-right" /> -->
        </div>
      </div>
      <!-- 标题栏 -->

      <!-- 统计卡内容 -->
      <div class="card-content">
        <el-row style="width: 98%;margin: 0 auto;" type="flex" justify="space-between">
          <el-col
            v-for="(item, index) in statistics"
            :key="`a${index}`"
            class="col-style"
            :span="6"
          >
            <img class="img" :src="require('@/assets/images/jjxt/production-safety/segment-level-home/statistics-bg.png')">
            <div class="text-content">
              <div class="text-one">{{ statistics[index].name }}</div>
              <el-row class="text-two">
                <el-col :span="12">高铁{{ (activeTabIndex === 0 ? dealNullToZero(repairSkylightStatistics[statistics[index].highSpeed]) : dealNullToZero(constructionSkylightStatistics[statistics[index].highSpeed])) + statistics[index].unit }}</el-col>
                <el-col :span="12">普铁{{ (activeTabIndex === 0 ? dealNullToZero(repairSkylightStatistics[statistics[index].normalSpeed]) : dealNullToZero(constructionSkylightStatistics[statistics[index].normalSpeed])) + statistics[index].unit }}</el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 统计卡内容 -->

      <!-- 表格内容 -->
      <!-- <el-scrollbar> -->
      <div class="table-div">
        <table
          class="table"
          cellspacing="0"
        >
          <tr class="tr-th">
            <th class="th column1">线别</th>
            <th class="th column2">工区</th>
            <!-- <th class="th column1">
              <el-popover
                placement="top"
                trigger="hover">
                <div v-if="lines.length>0">
                  <el-checkbox v-model="checkAllLines" :indeterminate="isIndeterminateLines" style="margin-left: 24px;" @change="handleCheckAllLines">全选</el-checkbox>
                  <el-scrollbar>
                    <el-tree
                      ref="linesTree"
                      style="max-height:300px;"
                      :data="lines"
                      show-checkbox
                      default-expand-all
                      node-key="lineId"
                      highlight-current
                      :props="{ label: 'lineName', value: 'lineId', parent: 'parentId', children: 'children' }"
                      @check="changeLine" />
                    <div style="height:10px;" />
                  </el-scrollbar>
                </div>
                <div slot="reference">线别 <i class="el-icon-arrow-down" /></div>
              </el-popover>
            </th>
            <th class="th column2">
              <el-popover
                placement="top"
                trigger="hover">
                <div v-if="workAreaList.length>0">
                  <el-checkbox v-model="checkAllWorkArea" :indeterminate="isIndeterminateWorkArea" style="margin-left: 24px;" @change="handleCheckAllWorkArea">全选</el-checkbox>
                  <el-scrollbar>
                    <el-tree
                      ref="WorkAreaTree"
                      style="max-height:300px;"
                      :data="workAreaList"
                      show-checkbox
                      default-expand-all
                      node-key="id"
                      highlight-current
                      :props="{ label: 'deptName', value: 'deptCode', parent: 'parentId', children: 'children' }"
                      @check="changeWorkArea" />
                    <div style="height:60px;" />
                  </el-scrollbar>
                </div>
                <div slot="reference">工区 <i class="el-icon-arrow-down" /></div>
              </el-popover>
            </th> -->
            <th class="th column3">作业项目</th>
            <th class="th column4">作业地点</th>
            <th class="th column5">计划时间(分)</th>
            <th class="th column6">状态</th>
          </tr>
        </table>
        <div class="table">
          <vue-seamless-scroll
            v-if="dataList.length > 0"
            class="seamless-warp"
            :data="dataList"
            :class-option="seamlessScrollclassOption"
          >
            <ul class="item">
              <li
                v-for="(item, index) in dataList"
                :key="`a${index}`"
                class="tr-td"
                @click="maintenanceDetail(item)"
              >
                <div class="column1" :title="item.lineName">{{ item.lineName }}</div>
                <div class="column2" :title="item.deptName">{{ item.deptName }}</div>
                <div class="column3" :title="item.workContent">{{ item.workContent }}</div>
                <div class="column4" :title="item.workAddress">{{ item.workAddress }}</div>
                <div class="column5" :title="(item.planDate.substring(5, 6) === '0' ? item.planDate.substring(6, 11) : item.planDate.substring(5, 11)) + ' ' + item.workTime">{{ item.planDate.substring(5, 6) === '0' ? item.planDate.substring(6, 11) : item.planDate.substring(5, 11) }}&nbsp;{{ item.workTime }}</div>
                <div
                  class="column6"
                  :title="item.flowNodeText"
                  :style="{color: item.flowNodeText.indexOf('完成')!= -1?'#67C23A':item.flowNodeText.indexOf('取消')!= -1?'#f42929':'#ffffff'}"
                >
                  {{ item.flowNodeText }}
                </div>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
      <!-- </el-scrollbar> -->
      <!-- 表格内容 -->
    </div>
  </div>
</template>

<script>
import { getLineList } from '@/api/main.js';
import { getRepairSkylightDataList, getConstructionSkylightDataList } from '@/api/jjxt/production-safety/segment-level-home';
import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      activeTabIndex: 0,

      // 统一显示的统计
      statistics: [
        { name: '天窗申请', highSpeed: 'gtTotal', normalSpeed: 'ptTotal', unit: '个' },
        { name: '给点', highSpeed: 'gtGeidian', normalSpeed: 'ptGeidian', unit: '个' },
        { name: '行调给点', highSpeed: 'gtXingdiao', normalSpeed: 'ptXingdiao', unit: '分钟' },
        { name: '检修时间', highSpeed: 'gtWorkMinutes', normalSpeed: 'ptWorkMinutes', unit: '分钟' }
      ],
      // 维修天窗情况信息的统计
      repairSkylightStatistics: {
        gtTotal: 0,
        ptTotal: 0,
        gtGeidian: 0,
        ptGeidian: 0,
        gtXingdiao: 0,
        ptXingdiao: 0,
        gtWorkMinutes: 0,
        ptWorkMinutes: 0
      },
      // 施工天窗情况信息的统计
      constructionSkylightStatistics: {
        gtTotal: 0,
        ptTotal: 0,
        gtGeidian: 0,
        ptGeidian: 0,
        gtXingdiao: 0,
        ptXingdiao: 0,
        gtWorkMinutes: 0,
        ptWorkMinutes: 0
      },

      // 统一显示的信息列表
      dataList: [],
      // 维修天窗情况信息列表
      repairSkylightDataList: [],
      // 施工天窗情况信息列表
      constructionSkylightDataList: [],
      lines: [], // 线别
      checkAllLines: false, // 线路选择所有
      checkAllWorkArea: false, // 工区选择所有
      workAreaList: [] // 工区
    };
  },
  computed: {
    seamlessScrollclassOption() {
      return {
        step: this.dataList.length > 5 ? 0.5 : 0, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: false, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  mounted() {
    this.getRepairSkylightDataList(); // 查询维修天窗情况信息列表
    this.getConstructionSkylightDataList(); // 查询施工天窗情况信息列表
    // this.getLineList() // 获取线路
  },
  methods: {
    // 获取线路
    getLineList() {
      getLineList().then((response) => {
        this.lines = response.data;
      });
    },

    // 全选/反选线路
    handleCheckAllLines(val) {
      this.isChangeQuery = true;
      this.listQuery.lineCodeArr = [];
      if (val) {
        // 全选
        this.$refs.linesTree.setCheckedNodes(this.lines);
        for (var i in this.lines) {
          this.listQuery.lineCodeArr.push(this.lines[i].obj.lineCode);
        }
      } else {
        // 取消选中
        this.$refs.linesTree.setCheckedKeys([]);
      }
      this.isIndeterminateLines = false;
      this.popoverHide();
    },
    handleCheckAllWorkArea(val) {
      this.isChangeQuery = true;
      this.listQuery.deptCodeArr = [];
      if (val) {
        // 全选
        this.$refs.WorkAreaTree.setCheckedNodes(this.workAreaList);
        for (var i in this.workAreaList) {
          this.listQuery.deptCodeArr.push(this.workAreaList[i].deptCode);
        }
      } else {
        // 取消选中
        this.$refs.WorkAreaTree.setCheckedKeys([]);
      }
      this.isIndeterminateWorkArea = false;
      this.popoverHide();
    },
    //   选择线路
    changeLine(data) {
      // eslint-disable-next-line no-undef
      findWorkAreaByLine({ lineCode: data.obj.lineCode }).then((response) => {
        this.workAreaList = response.data;
      });
      this.isChangeQuery = true;
      if (this.listQuery.lineCodeArr.indexOf(data.obj.lineCode) === -1) {
        this.listQuery.lineCodeArr.push(data.obj.lineCode);
      } else {
        for (var i in this.listQuery.lineCodeArr) {
          if (this.listQuery.lineCodeArr[i] === data.obj.lineCode) {
            this.listQuery.lineCodeArr.splice(i, 1);
          }
        }
      }
      this.checkAllLines = this.listQuery.lineCodeArr.length === this.lines.length;
      this.isIndeterminateLines = this.listQuery.lineCodeArr.length > 0 && this.listQuery.lineCodeArr.length < this.lines.length;
      this.popoverHide();
    },
    changeWorkArea(data) {
      this.isChangeQuery = true;
      if (this.listQuery.deptCodeArr.indexOf(data.deptCode) === -1) {
        this.listQuery.deptCodeArr.push(data.deptCode);
      } else {
        for (var i in this.listQuery.deptCodeArr) {
          if (this.listQuery.deptCodeArr[i] === data.deptCode) {
            this.listQuery.deptCodeArr.splice(i, 1);
          }
        }
      }
      this.checkAllWorkArea = this.listQuery.deptCodeArr.length === this.workAreaList.length;
      this.isIndeterminateWorkArea = this.listQuery.deptCodeArr.length > 0 && this.listQuery.deptCodeArr.length < this.workAreaList.length;
      this.popoverHide();
    },

    // 统一处理null值为0
    dealNullToZero(data) {
      if (data === null) {
        return 0;
      } else {
        return data;
      }
    },

    // 查询维修天窗情况信息列表
    getRepairSkylightDataList() {
      getRepairSkylightDataList().then(res => {
        this.repairSkylightStatistics = res.data.count[0];
        this.repairSkylightDataList = res.data.list;
        this.dataList = this.repairSkylightDataList;
      });
    },

    // 查询施工天窗情况信息列表
    getConstructionSkylightDataList() {
      getConstructionSkylightDataList().then(res => {
        this.constructionSkylightStatistics = res.data.count[0];
        this.constructionSkylightDataList = res.data.list;
      });
    },

    changeTab(index) {
      this.activeTabIndex = index;
      switch (index) {
        case 0:
          this.dataList = this.repairSkylightDataList;
          break;
        case 1:
          this.dataList = this.constructionSkylightDataList;
          break;
      }
    },

    maintenanceDetail(item) {
      this.$emit('openMaintenanceDetail', item);
    }
  }
};
</script>

<style lang="scss" scoped>
.sky-light-situation-style {
  position: relative;
  color: white;
  height: 362px;
  width: 928px;
  box-sizing: border-box;
  overflow: hidden;
  .component-inner-div {
    border: 2px solid #122a57;
    height: 100%;
    background-color: rgba($color: #0a1944, $alpha: 0.9);
    box-sizing: border-box;
    .title {
      color: #3695FF;
      font-size: 20px;
      padding: 0;
      margin: 20px 16px 0 16px;
      padding-bottom: 16px;
      align-items: center;
      display: flex;
      // border-bottom: 1px solid #0b62a3;
      .tab-style {
        display: flex;
        align-items: center;
        .active-tab {
          cursor: pointer;
          font-size: 18px;
          border-radius: 10px;
          padding: 6px 20px;
          border: 1px solid #0b62a3;
          box-sizing: border-box;
        }
        .tab-item {
          cursor: pointer;
          font-size: 18px;
          padding: 6px 20px;
          color: #fefefe;
          opacity: 0.5;
          border: 1px solid rgba(0, 0, 0, 0);
          box-sizing: border-box;
        }
      }
      .more-btn {
        position: absolute;
        right: 20px;
        color: #eaea4d;
        font-size: 14px;
        cursor: pointer;
      }
    }
    .card-content {
      margin-top: 0;
      .col-style {
        position: relative;
        text-align: center;
        .img {
          margin: 0 auto;
          width: 210px;
          height: 60px;
        }
        .text-content {
          position: absolute;
          top: 7px;
          width: 100%;
          .text-one {
            color: #27ecf5;
            font-size: 15px;
            line-height: 25px;
          }
          .text-two {
            width: 90%;
            font-size: 13px;
            line-height: 20px;
            margin: 0 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    .el-scrollbar {
      position: absolute;
      top: 125px;
      left: 0;
      right: 0;
      bottom: 3px;
      ::v-deep .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .table-div {
      margin: 12px 16px 0 16px;
      .table {
        border-collapse: collapse;
        width: 100%;
        cursor: pointer;
        .seamless-warp{
          height: 100%;
          overflow: hidden;
        }
        .tr-th {
          font-size: 16px;
          background-color: #0c3a90;
          .th {
            font-weight: 300;
            padding: 8px 0 8px 0;
            border: 1px solid rgba(12, 58, 144, 0.4);
          }
          .column1 {
            padding: 8px 0;
            width: 110px;
            text-align: center;

          }
          .column2 {
            padding: 8px 0;
            width: 170px;
            text-align: center;
          }
          .column3 {
            padding: 8px 0;
            width: 170px;
            text-align: center;
          }
          .column4 {
            padding: 8px 0;
            width: 170px;
            text-align: center;
          }
          .column5 {
            padding: 8px 0;
            width: 170px;
            text-align: center;
          }
          .column6 {
            padding: 8px 0;
            width: 100px;
            text-align: center;
          }
        }
        td {
          border: 1px solid rgba(12, 58, 144, 0.4);
        }
        .tr-td {
          font-size: 16px;
          display: flex;
          .column1 {
            padding: 8px 0;
            width: 110px;
            text-align: center;
            border: 1px solid rgba(12, 58, 144, 0.4);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .column2 {
            padding: 8px 0;
            width: 170px;
            text-align: center;
            border: 1px solid rgba(12, 58, 144, 0.4);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .column3 {
            padding: 8px 0;
            width: 170px;
            text-align: center;
            border: 1px solid rgba(12, 58, 144, 0.4);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .column4 {
            padding: 8px 0;
            width: 170px;
            text-align: center;
            border: 1px solid rgba(12, 58, 144, 0.4);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .column5 {
            padding: 8px 0;
            width: 170px;
            text-align: center;
            border: 1px solid rgba(12, 58, 144, 0.4);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .column6 {
            padding: 8px 0;
            width: 100px;
            text-align: center;
            border: 1px solid rgba(12, 58, 144, 0.4);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}
</style>
